// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'; //引入element组件库
import 'element-ui/lib/theme-chalk/index.css'; // 引入element组件库的css样式
import './styles/index.scss'
import store from '@/store/store'


Vue.use(ElementUI); // 使用组件库
Vue.config.productionTip = false

// 注册一个全局导航守卫，在路由跳转前，对路由进行判断，防止未登录的用户跳转到其他页面
router.beforeEach((to, from, next) => {
  // 获取存储的token登录状态, 进行判断
  let token = localStorage.getItem('mytoken')
  if(token) {
    // 如果token值存在，表示已经登录成功了，就可以跳转到其他页面访问
    next()
  }else{
    /* 如果token值不存在,表示没有登录 
    如果没有登录，访问的是其它需要登录进去的页面,那么就强制跳转到登录页面 */
    if(to.path !== '/login') {
      next({path: '/login'})
    }else{
      // 如果访问的是登录页面，那么就不干涉，继续下一步登录操作
      next()
    }
  }
})


/* 使用vuex 用于组件间互相传值或者数据 
      使用Vuex的步骤： 
     1. npm 安装vuex
     2. 引入 vuex
      import Vuex from 'vuex'
      3. 使用vuex插件
      Vue.use(Vuex);
       4. 创建共享数据仓库     / const store = new Vuex.store({
     state: {  // 所有要共享的数据---相当于 vue实例中的data
       count: 100,
       username: 'xx'
     },
     mutations: {   相当于以前的methods  --- 要改变state中的数据必须通过
                     mutations中的方法来改变     
       add(state) {
         state.count++
       }
     }
   })  
     5. 要在vue实例中注入 
   6. 在任意组建中， 使用 $store.state.count获取 */

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
